<template>
    <div id="tmpl">
        <div class="row" v-for="(item,index) in datalist">
            <mt-switch class="switch" v-model="value[index]"></mt-switch>
            <img class="img" :src="item.thumb_path" alt="商品图片" >
            <div class="inforight">
                <h4 v-text="item.title"></h4>
                <div class="bottom">
                    <ul>
                        <li>￥{{item.sell_price}}</li>
                        <li>购买数量组件</li>
                        <li><a href="#">删除</a></li>
                    </ul>
                </div>
                {{value}}
            </div>
        </div>
    </div>
</template>
<script>
    import {getgoodsObject} from "../../Kits/localSg.js"
    import common from "../../Kits/common.js"
    import { Toast } from 'mint-ui';
    import carinputnumber from "../subcom/carinputNumber.vue"
    export default{
        data() {
            return{
                value:[],
                datalist:[

                ]
            }
        },
        created(){
            this.getdatalist();
        },
        methods:{
            getdatalist(){
                var obj=getgoodsObject();
                var idstring="";
                for(var key in obj){
                    idstring += key + ",";
                }
                idstring = idstring.substring(0,idstring.length-1);
                var url=common.apidomain+"/api/goods/getshopcarlist/"+idstring;
                this.$http.get(url).then(function (res) {
                    if(res.body.status != 0){
                        Toast(res.body.message);
                        return;
                    }
                    this.datalist=res.body.message
                })
            }
        }
    }
</script>
<style scoped>
    .row{
        border-bottom: 1px solid rgba(0,0,0,0.3);
        height: 102px;
        display: flex;
        padding: 5px;
    }

    .switch{
        flex:0 0 52px;
    }

    .img{
        margin-left: 5px;
        height: 75px;
        width: 75px;
        flex: 0 0 85px;
    }

    .inforight{
        margin-left: 5px;
        flex:1;
    }
    .inforight ul{
        padding-left: 0px;
    }
    .inforight li{
        list-style: none;
        display: inline-block;
    }

    .inforight h4{
        color: #0094ff;
        font-size: 14px;
    }

    .bottom li:first-child{
        color:red;
        margin-right: 5px;
    }

    .bottom li:last-child{
        margin-left: 5px;
    }
</style>